<html>

  <head>

    <meta name= "viewport" content= "width=device-width" http-equiv="Content-Type"/>
    <title>BMD/BDL model with 2 or more animated bones</title>
    <link rel="icon" type="image.jpg" href="../../images/icon.png" />
    <link rel="stylesheet" href="../../styles.css" type="text/css">

  </head>

  <body>

    <div class="start">
      <div class="title">
        <h1>BMD/BDL model with 2 or more animated bones</h1> 
      </div>
    </div>

    <div class="main">

      <div class="right">

        <h3>Index</h3>
        <hr>

        <p>1. <a href="../../index.html">Introduction</a></p>
        <p>2. <a href="../tutorials.html">Tutorials</a></p>
        <p>3. <a href="../resources.html">Resources</a></p>

      </div>

    <div class="left">

    <h2>Contents</h2>
    <hr>

				<p>1. <a href="#tools">Required tools</a></p>
				<p>2. <a href="#tutorials">Required tutorials</a></p>
				<p>3. <a href="#pre-tutorial">Pre-tutorial</a></p>
        <p>4. <a href="#steps">Steps</a></p>

				<br>

    <hr id="tools">
    <h2>Required tools</h2>
    <p>Refer to the "Resources" section for download.</p>

      <p>- Blender</p>
      <p>- SuperBMD</p>
      <p>- j3dview</p>
      <p>- j3d animation editor</p>
      <p>- Any text editor you like (Notepad++ is recommended)</p>
      <p>- Arc Convertor</p>
      <p>- Whitehole</p>
      <p>- Wiimm's ISO Tools (to get your SMG1 dump)</p>

      <br>

    <hr id="tutorials">
    <h2>Required tutorials</h2>
    <hr>

      <p>- Basically all of the ones before this one.</p>
      <br>

    <hr id="pre-tutorial">
    <h2>Pre-tutorial</h2>
    <hr>

    <p><b>Before starting the tutorial</b> I will teach you something you will need to know when using <b>Blender</b> to setup <b>bones</b> of an object for SMG.</p>

    <p>First you need to know that when I refer to a <code>bone</code> I am referring to an <code>Armature</code> <b>bone</b>. <b>Armatures</b> by default have only <b>1 bone</b> in <b>Blender</b> (<b>Fig. 1</b>).</p>

    <img src="../../images/t10/Fig. 1.jpg">
    <b><p class="idtext">(Fig. 1 - Armature object)</p></b>
    <br>

    <p>To get (for example) more <b>bones</b> in an <b>Armature</b>, let's say <b>3</b>, you can <b>create 3 Armature objects</b> (<b>Fig. 2</b>), select all of them and <b>join them</b> by pressing <code>Ctrl + J</code>, resulting in a <b>3 bone Armature object</b> (<b>Fig. 3</b>). <i>Alternatively</i>, you can create a single <b>Armature object</b>, enter <b>Edit Mode</b>, and press <code>Shift + A</code>, that will create another <b>bone</b> in the <b>Armature</b>.</p>

    <img src="../../images/t10/Fig. 2.jpg">
    <b><p class="idtext">(Fig. 2 - 3 Armature objects)</p></b>
    <br>

    <img src="../../images/t10/Fig. 3.jpg">
    <b><p class="idtext">(Fig. 3 - Armature object with 3 bones)</p></b>
    <br>

    <p>Once they are joined the <b>individual bones</b> can be moved in <b>Edit Mode</b> (by selecting one of them). The name of each <b>bone</b> will <b>highlight</b> when clicked under <b>edit mode</b> (<b>Fig. 4</b>).</p>

    <img src="../../images/t10/Fig. 4.jpg">
    <b><p class="idtext">(Fig. 4 - Name of bone from armature)</p></b>
    <br>

    <p>With that clear, the next thing to do is to decide how to <b>parent the bones</b> (<b>the child bones will inherit the animations of the parent bone</b>). You can <b>parent bones</b> by selecting one and setting its <b>parent</b> by going to the <code>Bone</code> <b>tab</b> of a selected <b>bone</b> under <b>Edit Mode</b> (<b>Fig. 5</b>).</p>

    <img src="../../images/t10/Fig. 5.jpg">
    <b><p class="idtext">(Fig. 5 - Bone parenting)</p></b>
    <br>

    <p>You can decide from here what <b>bones</b> you want to parent and such (<b>Fig. 6</b>).</p>

    <img src="../../images/t10/Fig. 6.jpg">
    <b><p class="idtext">(Fig. 6 - Example of bone parenting)</p></b>
    <br>

    <p>Now, with that said, the way to <b>link meshes</b> (models) to these <b>bones</b> is to assign the <b>mesh</b> to a <code>Vertex Group</code> named <b>exactly as the bone name</b> and assign all its <b>vertex</b> (also part of its <b>vertex</b> is valid but that is for <b>complex models</b>) to that <b>vertex group</b> (<b>Fig. 7 and 8</b>). The mesh will be <b>weighted</b> when assigned to the <b>vertex group</b> so there is no need to <b>manually weight it</b>.</p>

    <img src="../../images/t10/Fig. 7.jpg">
    <b><p class="idtext">(Fig. 7 - Creating vertex group)</p></b>
    <br>

    <img src="../../images/t10/Fig. 8.jpg">
    <b><p class="idtext">(Fig. 8 - Assigning vertex from mesh to vertex group)</p></b>
    <br>

    <p>Also, set an <b>armature modifier</b> for your <b>mesh</b> (model) and set the <code>Object</code> <b>property</b> to be the <b>armature object</b> (<b>Fig. 9</b>).</p>

    <img src="../../images/t10/Fig. 9.jpg">
    <b><p class="idtext">(Fig. 9 - Assigning vertex from mesh to vertex group)</p></b>
    <br>

    <p><b>Something else I want to add</b> (I will explain it better later in the tutorial, with <b>a failed attempt of my tutorial model</b>) is that when making <b>relative bones</b> like this, you have to set their <b>relative position</b> with respect to the <b>parent bone</b> on the <b>j3d-animation-editor program</b> (<b>on Frame 0</b>) since for some reason when the model is converted to a <b>BMD/BDL</b> the <b>relative bones</b> will have the <b>same location</b> as its <b>parent bone</b> (this can get messy on <b>complex animations</b>).</p>

    <br>

    <hr id="steps">
    <h2>Steps &emsp;&emsp;&emsp; &emsp;&emsp;&emsp; &emsp;&emsp;&emsp; &emsp;&emsp;&emsp; &emsp;&emsp;&emsp; files used: <a href="https://archive.org/download/humming-owl-storage/tutorial10.zip">tutorial10.zip</a></h2>
    <hr>

      <p>This tutorial is an example of what you can do, I can't cover it in a general way (because I am also new to this) and also can't describe everything I do, but I hope this example fits the explanation well.</p>

      <p>I will make a <b>car model</b>. It has <b>4 wheels</b>, and a <b>propeller</b> (because <i>why not</i>, <b>Fig. 10</b>).</p>

      <img src="../../images/t10/Fig. 10.jpg">
      <b><p class="idtext">(Fig. 10 - Car model)</p></b>
      <br>

      <p>The model, as you can tell from <b>Fig. 10</b>, is divided in <b>5 meshes</b>: <code>car_casing</code>, <code>car_propeller</code>, <code>car_propeller_holder</code>, <code>car_wheels_back</code> and <code>car_wheels_front</code>. The <code>car_casing</code> and <code>car_propeller_holder</code> will be assigned to the <b>main bone</b> and the others to a <b>different bone each</b> that will be <b>child</b> of the <b>main bone</b>. In total, the <b>Armature object</b> for this model will have <b>4 bones</b>.</p>

      <p>So let's create an <b>Armature object</b> that has this structure. Following what I've said above (<b>pre-tutorial</b>) we get something as shown on <b>Fig. 11</b>. I took the freedom to change each <b>bone's name</b> to a name I can understand its purpose.</p>

      <img src="../../images/t10/Fig. 11.jpg">
      <b><p class="idtext">(Fig. 11 - Armature object for car model)</p></b>
      <br>

      <p>The <code>car</code> <b>bone</b>, as it is the <b>main bone</b>, I can position it wherever I want to be honest so I will put it in the middle of the <b>car model</b> (<b>Fig. 12</b>).</p>

      <img src="../../images/t10/Fig. 12.jpg">
      <b><p class="idtext">(Fig. 12 - <code>car</code> bone location)</p></b>
      <br>

      <p>The <code>wheels_front</code> <b>bone</b>, as it is the <b>bone</b> for the <b>front wheels mesh</b>, I need to put it <b>in the middle of the segment that connects both front wheel's centers</b> (<b>Fig. 13</b>).</p>

      <img src="../../images/t10/Fig. 13.jpg">
      <b><p class="idtext">(Fig. 13 - <code>wheels_front</code> bone location)</p></b>
      <br>

      <p>The <code>wheels_back</code> <b>bone</b>, as it is the <b>bone</b> for the <b>back wheels mesh</b>, I need to put it <b>in the middle of the segment that connects both back wheel's centers</b> (<b>Fig. 14</b>).</p>

      <img src="../../images/t10/Fig. 14.jpg">
      <b><p class="idtext">(Fig. 14 - <code>wheels_back</code> bone location)</p></b>
      <br>

      <p>The <code>propeller</code> <b>bone</b>, as it is the <b>bone</b> for the <b>propeller mesh</b>, I need to put it <b>in the line around which the propeller rotates</b> (<b>Fig. 15</b>).</p>

      <img src="../../images/t10/Fig. 15.jpg">
      <b><p class="idtext">(Fig. 15 - <code>propeller</code> bone location)</p></b>
      <br>

      <p>After setting their <b>positions</b> exit <b>Edit Mode</b> and reset the <b>Armature's position</b> with <code>Ctrl + A > Location</code> so that the origin of the <b>armature object</b> is set to the origin of <b>Blender's reference system</b> (<b>Fig. 16</b>). You can also see on <b>Fig. 16</b> how the <b>bones</b> are <b>linked</b> to each other (<i>pretty cool huh</i>).</p>

      <img src="../../images/t10/Fig. 16.jpg">
      <b><p class="idtext">(Fig. 16 - Armature's new origin)</p></b>
      <br>

      <p>Set the <b>armature object</b> as the <b>parent</b> of <b>all meshes</b> and assign to <b>all meshes</b> the <b>armature modifier</b> with their <code>Object</code> <b>property</b> being the <b>armature object</b> (almost forgot this one lol - <b>Fig. 17</b>).</p>

      <img src="../../images/t10/Fig. 17.jpg">
      <b><p class="idtext">(Fig. 17 - All meshes with their Armature modifier)</p></b>
      <br>

      <p>With everything in its place, <b>link/assign</b> each mesh of your model to each <b>vertex group needed</b>. The <code>car_casing</code> and <code>car_propeller_holder</code> <b>meshes</b> to the <code>car</code> <b>vertex group</b> (<b>Fig. 18 and 19</b>), the <code>car_wheels_back</code> <b>mesh</b> to the <code>wheels_back</code> <b>vertex group</b> (<b>Fig. 20</b>), the <code>car_wheels_front</code> <b>mesh</b> to the <code>wheels_front</code> <b>vertex group</b> (<b>Fig. 21</b>) and the <code>car_propeller</code> <b>mesh</b> to the <code>propeller</code> <b>vertex group</b> (<b>Fig. 22</b>).</p>

      <img src="../../images/t10/Fig. 18.jpg">
      <b><p class="idtext">(Fig. 18 - <code>car_casing</code> assigned to <code>car</code> vertex group)</p></b>
      <br>

      <img src="../../images/t10/Fig. 19.jpg">
      <b><p class="idtext">(Fig. 19 - <code>car_propeller_holder</code> assigned to <code>car</code> vertex group)</p></b>
      <br>

      <img src="../../images/t10/Fig. 20.jpg">
      <b><p class="idtext">(Fig. 20 - <code>car_wheels_back</code> assigned to <code>wheels_back</code> vertex group)</p></b>
      <br>

      <img src="../../images/t10/Fig. 21.jpg">
      <b><p class="idtext">(Fig. 21 - <code>car_wheels_front</code> assigned to <code>wheels_front</code> vertex group)</p></b>
      <br>

      <img src="../../images/t10/Fig. 22.jpg">
      <b><p class="idtext">(Fig. 22 - <code>car_propeller</code> assigned to <code>propeller</code> vertex group)</p></b>
      <br>

      <hr>
      <p><b>NOTE 1</b>: I had reset the positions of the <b>meshes linked</b> to the <b>main bone</b> with <code>Ctrl + A</code>. For some reason the model was converted weirdly if I didn't do it. <i>Be careful with that stuff!</i></p>
      <hr>

      <br>

      <p>Now your model is ready to <b>leave Blender!</b> export it as an <b>FBX</b> (uncheck the <code>Add Leaf Bones</code> option of the <code>Armatures</code> <b>Tab</b> when exporting - <b>Fig. 23</b>).</p>

      <img src="../../images/t10/Fig. 23.jpg">
      <b><p class="idtext">(Fig. 23 - <code>Add Leaf Bones</code> option unchecked on export)</p></b>
      <br>

      <hr>
      <p><b>NOTE 2</b>: you can also export it as a <b>DAE file</b> without any more operations.</p>
      <hr>

      <br>

      <p>Then, convert the <b>FBX</b> to <b>BMD</b> with <b>SuperBMD</b> using the following command:</p>

      <p><code>path\to\SuperBMD.exe [FBX model] --mat [Material JSON] --texheader [Textures JSON] --rotate --root_marker [Armature name] --nosort</code></p>

      <p>Check the model on <b>j3dview</b> to see if everything looks correct (the <b>rotations</b> wont be so don't worry about that, the <b>animation</b> will <i>fix</i> it - <b>Fig. 24</b>).</p>

      <img src="../../images/t10/Fig. 24.jpg">
      <b><p class="idtext">(Fig. 24 - Car model on j3dview, noice)</p></b>
      <br>

      <p>Now it begins the part of the <b>jd3-animation-editor</b> program. As the model has <b>4 bones</b> create a <b>new animation table on j3d-animation-editor that is 4 bones long</b> (<b>Fig. 25</b>).</p>

      <img src="../../images/t10/Fig. 25.jpg">
      <b><p class="idtext">(Fig. 25 - New animation table for 4 bones)</p></b>
      <br>

      <p>As order of appearance, <code>Joint 0</code> will be the <code>car</code> <b>bone</b>, <code>Joint 1</code> will be the <code>wheels_front</code> <b>bone</b>, <code>Joint 2</code> will be the <code>wheels_back</code> <b>bone</b> and <code>Joint 3</code> will be the <code>propeller</code> <b>bone</b>. I will set the values for my animation as follows:</p>

      <p><b>For the <code>car</code> bone</b>: this bone will translate on the X axis only.</p>
      <p><b>For the <code>wheels_front</code> bone</b>: this bone will rotate around the Z axis.</p>
      <p><b>For the <code>wheels_back</code> bone</b>: this bone will rotate around the Z axis.</p>
      <p><b>For the <code>propeller</code> bone</b>: this bone will rotate around the X axis.</p>

      <p>This animation will be in a <b>loop</b> and will last <b>200 frames</b>.</p>

      <br>

      <hr>
      <p><b>NOTE 3</b>: to understand how the <b>rotations/translations/scaling</b> work, you need to either use <b>Whitehole and Blender</b> to predict which will be the <b>axis to assign the values</b> or you can just <b>brute force</b> the values (<i>assign values randomly</i>) and test (<b>in both cases</b>) the <b>animation</b> for your object on <b>j3dview</b>.</p>
      <hr>

      <br>

      <p>With that, I get something as shown on <b>Fig. 26</b>.</p>

      <img src="../../images/t10/Fig. 26.jpg">
      <b><p class="idtext">(Fig. 26 - Animation table for car model)</p></b>
      <br>

      <p>At this point everything seems to be <i>finished</i>, but there is <b>something else</b>. It is what I mentioned on the <b>beginning of the tutorial</b>, the <b>relative positions</b> between <b>bones</b>. If I go and <b>test my model</b> with <b>this animation</b> I will get what is shown on <b>Vid. 1</b>.</p>
      
      <iframe id="embed" src="https://www.youtube.com/embed/hdNkMgKtXAg?si=EuVa8HPd2jrTWB3I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>  
      
      <b><p class="idtext">(Vid. 1 - Car model with incomplete animation table)</p></b>
      <br>

      <p><b>All the relative bones are in the same position as the car bone!</b> (see <b>Fig. 27</b> as reference) <b>To fix this</b> you have to assign the <b>relative position</b> of <b>each bone</b> with respect to its <b>parent bone</b> on the <b>Frame 0</b> of the <b>animation table</b> (<i>you'll have to see and analize those positions from Blender</i>, and remember, <b>relative positions!</b>). </p>

      <img src="../../images/t10/Fig. 27.jpg">
      <b><p class="idtext">(Fig. 27 - Bones position on Blender model)</p></b>
      <br>

      <p>On my <a href="t8.html">Blenxy template</a> <b>one unit (Galaxy Unit or GU) is 100 units on the j3d-animation-editor program</b>. The <b>animation table</b>, then, will look like what is shown on <b>Fig. 28</b>.</p>

      <img src="../../images/t10/Fig. 28.jpg">
      <b><p class="idtext">(Fig. 28 - Fixed animation table for car model)</p></b>
      <br>

      <hr>
      <p><b>NOTE 4:</b> to avoid assigning <b>Frame 0 values</b> to a <b>bone</b> you want to <b>animate</b>, you can <b>create 2 bones</b>, <i>let one be the child of the other</i>, and, set the <b>Frame 0 values</b> to the <b>parent bone</b>, then the <b>child bone will just inherit those positions</b> and you can freely assign <b>Frame values</b> on the <b>child bone</b> without having to consider its <b>Frame 0 values</b>.</p>
      <hr>

      <br>

      <p>And then, <b>the final result</b> will be what is shown on <b>Vid. 2</b> (<b>finally!</b>).</p>

      <iframe id="embed" src="https://www.youtube.com/embed/wf1U9CzxtWQ?si=z4b1rgxoJY3xBWpZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

      <b><p class="idtext">(Vid. 2 - Car model with correct animation table)</p></b>
      <br>

      <p>You can know do what you know to get the model on <b>game</b> <b>C:</b></p>

      <br>

      <hr>
      <p><b>NOTE 5:</b> if your model is <b>too big</b> the <b>animations on game</b> will look in like <b>1 FPS</b> (it happened to me on this model). Be sure to <i>scale the model down and apply</i> <code>Ctrl + A</code> to it on <b>Blender</b> (scale down the <b>Armature object</b> and <code>Ctrl + A</code> everything that changes its scaling) as well as modifying the <b>animation table</b> according to the <b>down scaling made</b>.</p>
      <hr>

      <br>

    </div>

    </div>

  </body>

</html>
